<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

<script>
// 英文：listen -> 听；  Listener  -> 监听者 
const box = document.querySelector('.box');


// 绑定事件：将回调函数 绑定到 type 为 click 的事件上
// 后续，若 click 事件被触发，即执行 回调函数
/* DOM 0 级 事件绑定：
  box.onclick = function(e) {
    console.log('烟花', );
  }

  box.onclick = function(e) {
    console.log('音乐', );
  }

*/

// DOM0 级 事件绑定的缺点：
  // 1. 不能重复 绑定事件


// DOM2 级：事件绑定
// dom.addEventListener(type, callbackFn);
/* 
  box.addEventListener('click', function(e) {
    console.log('烟花');
  })
  box.addEventListener('click', function(e) {
    console.log('音乐走起');
  });
*/


// box.removeEventListener(type, callbackName)
/* 移除事件绑定：
  const firework = function(e) {
    console.log('烟花', e);
  }
  box.addEventListener('click', firework)
  box.removeEventListener('click', firework)
*/
</script>
